<template>
  <view class="flex flex-column pageHeight bg_F5F5F5 align-center wh_750"
        :class="page.headerIndex == 1 ? 'learnByHeart_one' : 'learnByHeart_two'"
  >
    <s-header-title isDisplayBack
                    title="用心记"
                    isFixed
                    @getPageHeight="getPageHeight"
    ></s-header-title>
    <view :style="{height:page.headerHeight+'px'}"></view>
    <view class="wh_750 hW_80 flex align-center justify-center">
      <view class="wh_250 hW_65 flex align-center justify-center"
            style="border-radius: 32rpx;"
            :style="{
              background:page.headerIndex == 0 ? '#FF7950' : '#FFFFFF',
              color:page.headerIndex == 0 ? '#FFFFFF' : '#FF7950'
            }"
            @click.stop="setIndex(0)"
      >
        {{ !page.selectUser ? 'Ta常说的话' : !!page.selectUser.surname || !!page.selectUser.daimyo ? `${!!page.selectUser.surname ? page.selectUser.surname : ''}${!!page.selectUser.daimyo ? page.selectUser.daimyo : ''}常说的话` : `${page.selectUser.remark}常说的话`
        }}
      </view>
      <view class="wh_33"></view>
      <view class="wh_250 hW_65 flex align-center justify-center"
            style="border-radius: 32rpx;"
            :style="{
              background:page.headerIndex == 1 ? '#FF7950' : '#FFFFFF',
              color:page.headerIndex == 1 ? '#FFFFFF' : '#FF7950'
            }"
            @click.stop="setIndex(1)"
      >
        {{ !page.selectUser ? '我想对Ta说' : !!page.selectUser.surname || !!page.selectUser.daimyo ? `我想对${!!page.selectUser.surname ? page.selectUser.surname : ''}${!!page.selectUser.daimyo ? page.selectUser.daimyo : ''}说` : `我想对${page.selectUser.remark}说`
        }}
      </view>
    </view>
    <scroll-view class="wh_750"
                 :scroll-y="true"
                 :style="{
                   height:setHeight()
                 }"
                 @scrolltolower="scrolltolower"
    >
      <view class="wh_750 flex flex-column align-center" v-if="page.headerIndex == 0">
        <view class="flex align-start mt_27 wh_702"
              v-for="(item,index) in page.learnByHeartList"
              :key="index"
        >
          <s-avatar :width="65" :height="65"
                    :src="item.member_avatar.indexOf('http') != -1 ? item.member_avatar : `${nc_image}${item.member_avatar}`"
          ></s-avatar>
          <view class="flex flex-column ml_15">
            <view class="wh_589 bg_FFFFFF flex flex-column"
                  style="border-radius: 8rpx"
            >
              <view class="mt_20 ml_15 mr_15 fs_30 fw_500 color_4B4B4B">
                {{ item.title }}:
              </view>
              <view class="mt_5 ml_35 mr_15 mb_20 fs_30 fw_500 color_4B4B4B">
                {{ item.content }}
              </view>
            </view>
            <view class="wh_589 flex align-center">
              <view class="fs_16 fw_500 color_4B4B4B mt_5 ml_12">
                来自于: {{ item.family_name }}
              </view>
              <view class="fs_16 fw_500 color_4B4B4B mt_5 ml_12">
                发布人: {{ item.create_surname }}{{ item.create_daimyo }}
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="wh_750 flex flex-column align-center" v-else>
        <view class="flex align-start justify-end mt_27 wh_702"
              v-for="(item,index) in page.learnByHeartList"
              :key="index"
        >
          <view class="flex flex-column align-end mr_15">
            <view class="wh_589 bg_FFFFFF"
                  style="border-radius: 8rpx"
            >
              <view class="mt_20 ml_15 mr_15 fs_30 fw_500 color_4B4B4B">
                {{ item.title }}:
              </view>
              <view class="mt_5 ml_35 mr_15 mb_20 fs_30 fw_500 color_4B4B4B">
                {{ item.content }}
              </view>
            </view>
            <view class="wh_589 flex align-center">
              <view class="fs_16 fw_500 color_4B4B4B mt_5 ml_12">
                来自于: {{ item.family_name }}
              </view>
              <view class="fs_16 fw_500 color_4B4B4B mt_5 ml_12">
                发布人: {{ item.create_surname }}{{ item.create_daimyo }}
              </view>
            </view>
          </view>
          <s-avatar :width="65" :height="65"
                    :src="item.member_avatar.indexOf('http') != -1 ? item.member_avatar : `${nc_image}${item.member_avatar}`"
          ></s-avatar>
        </view>
      </view>
    </scroll-view>
    <view class="wh_750 hW_235 flex flex-column align-start"
          style="background: rgba(255,255,255,0.33);overflow: hidden;"
    >
      <view class="wh_220 hW_66 flex align-center justify-between ml_21"
            v-if="!page.selectUser"
            style="background: #FFEAEA;border-radius: 46rpx"
            @click.stop="selectSuccess"
      >
        <view class="fs_17 fw_500 color_FFFFFF wh_50 hW_50 flex align-center justify-center ml_11"
              style="background: #FF7950;border-radius: 50%"
        >
          点击
        </view>
        <view class="flex align-center ml_5">
          <view class="fs_24 color_4B4B4B fw_500">
            请选择
          </view>
          <view class="fs_24 color_FF4206 fw_500">
            Ta
          </view>
        </view>
        <image :src="`${IMG_URL}/index/learnByHeart_arrow.png`" class="wh_23 hW_20 mr_18"></image>
      </view>
      <view class="hW_66 flex align-center justify-between ml_21"
            v-if="!!page.selectUser"
            style="background: #FFB29A;border-radius: 46rpx;padding: 0 15rpx"
            @click.stop="selectSuccess"
      >
        <s-avatar :width="50" :height="50"
                  :src="page.selectUser.avatar.indexOf('http') != -1 ? page.selectUser.avatar : `${nc_image}${page.selectUser.avatar}`"></s-avatar>
        <view class="flex align-center ml_5"
              v-if="page.headerIndex == 0"
        >
          <view class="fs_24 color_FF4206 fw_500"
                v-if="page.selectUser.surname || page.selectUser.daimyo"
          >
            {{ page.selectUser.surname }}{{ page.selectUser.daimyo }}
          </view>
          <view class="fs_24 color_FF4206 fw_500"
                v-else
          >
            {{ page.selectUser.remark }}
          </view>
          <view class="fs_24 color_4B4B4B fw_500">
            常说的话
          </view>
        </view>
        <view class="flex align-center ml_5"
              v-else
        >
          <view class="fs_24 color_4B4B4B fw_500">
            我对
          </view>
          <view class="fs_24 color_FF4206 fw_500"
                v-if="page.selectUser.surname || page.selectUser.daimyo"
          >
            {{ page.selectUser.surname }}{{ page.selectUser.daimyo }}
          </view>
          <view class="fs_24 color_FF4206 fw_500"
                v-else
          >
            {{ page.selectUser.remark }}
          </view>
          <view class="fs_24 color_4B4B4B fw_500">
            说
          </view>
        </view>
        <image :src="`${IMG_URL}/index/learnByHeart_arrow.png`"
               class="wh_23 hW_20 mr_18 ml_5"
               style="transform: rotate(90deg);"
        ></image>
      </view>
      <view class="flex align-end ml_21 mt_9">
        <view class="wh_589 hW_80 bg_FFFFFF flex align-center"
              style="border-radius: 15rpx"
              @click.stop="setTips()"
        >
          <input v-model="page.inputValue"
                 placeholder="请输入Ta常说的话："
                 class="wh_549 ml_20 mr_20"
                 placeholder-style="placeholderStyle"
                 :disabled="!page.selectUser"
          ></input>
        </view>
        <view class="wh_80 hW_80 flex align-center justify-center bg_FFFFFF ml_13"
              style="border-radius: 15rpx"
              @click.stop="sendLearnHeart"
        >
          <image class="wh_52 hW_52" :src="`${IMG_URL}/index/learnByHeart_send.png`"></image>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { computed, reactive } from 'vue';
  import { onLoad, onReady } from '@dcloudio/uni-app';
  import SHeaderTitle from '@/sheep/components/s-header-title/s-header-title.vue';
  import sheep from '@/sheep';
  import SAvatar from '@/sheep/components/s-avatar/s-avatar.vue';

  const page = reactive({
    options: {},
    // 是否选中家庭成员
    is_select: 2,
    // 头部index
    headerIndex: 0,
    headerHeight: 0,
    inputValue: '',
    // 选择的用户信息
    selectUser: null,
    params: {
      page: 1,
      pagesize: 20,
      total: 0,
    },
    learnByHeartList: [],
  });
  const nc_image = computed(() => sheep.$store('AI').nc_image);
  const IMG_URL = computed(() => sheep.$store('AI').sq_image_path);
  const setHeight = () => {
    return `calc(100vh - ${page.headerHeight + uni.upx2px(315)}px)`;
  };

  onLoad(async (options) => {
    page.options = options;
    if (!!options.member_id) {
      const { data } = await sheep.$api.family.getFamilyMemberDetail({
        member_id: options.member_id,
      });
      page.selectUser = data;
    }
    // 获取用心记
    await getLearnByHeart();
  });
  onReady(() => {
    uni.$on('selectUser', (info) => {
      page.selectUser = info;
      page.params.page = 1;
      page.learnByHeartList = [];
      getLearnByHeart();
    });
  });

  function getPageHeight(number) {
    page.headerHeight = number;
  }

  function selectSuccess() {
    sheep.$router.go('/pages/familyPage/screenLearnByHeart');
  }

  function setTips() {
    if (!page.selectUser) {
      sheep.$router.go('/pages/familyPage/screenLearnByHeart');
    }
  }

  async function sendLearnHeart() {
    if (!page.selectUser) {
      sheep.$helper.toast('请先选择成员');
      return;
    }
    if (!page.inputValue) {
      return;
    }
    const { code, msg } = await sheep.$api.family.addFamilyRemember({
      member_id: page.selectUser.id,
      is_private: 0,
      content: page.inputValue,
      type: page.headerIndex == 0 ? 1 : 2,
    });
    if (code == 1) {
      page.inputValue = '';
      page.params.page = 1;
      page.learnByHeartList = [];
      await getLearnByHeart();
    } else {
      sheep.$helper.toast(msg);
    }
  }

  // 获取用心记
  async function getLearnByHeart() {
    let obj = {};
    obj.page = page.params.page;
    obj.pagesize = page.params.pagesize;
    if (!!page.selectUser) {
      obj.member_id = page.selectUser.id;
    } else {
      obj.family_id = page.options.family_id;
    }
    obj.type = page.headerIndex == 0 ? 1 : 2;
    const { data } = await sheep.$api.family.getFamilyRememberList(obj);
    data.list.forEach(item => {
      page.learnByHeartList.push(item);
    });
    page.params.total = data.total;
  }

  async function setIndex(index) {
    page.headerIndex = index;
    page.params.page = 1;
    page.learnByHeartList = [];
    await getLearnByHeart();
  }

  function scrolltolower() {
    if (page.params.page * page.params.pagesize < page.params.total) {
      page.params.page += 1;
      getLearnByHeart();
    }
  }
</script>


<style scoped lang="scss">
  .learnByHeart_one {
    background: url($uni-bg-url-sq + '/index/learnByHeart_one.png') no-repeat;
    background-size: 750rpx 100vh;
  }

  .learnByHeart_two {
    background: url($uni-bg-url-sq + '/index/learnByHeart_two.png') no-repeat;
    background-size: 750rpx 100vh
  }

  .placeholderStyle {
    font-weight: 500;
    font-size: 24rpx;
    color: #C1C1C1;
  }
</style>
